<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HelloWorld from './components/HelloWorld.vue'
import MyPlayer from './components/MyPlayer.vue'
import {ref} from 'vue';

let livePlayer = ref(MyPlayer);
const playUrl = ref('https://1252670609.vod2.myqcloud.com/2bc76630vodtranscq1252670609/f7ab8e82387702294708492687/v.f100230.m3u8');
const play = () => {
  livePlayer.value.play(playUrl.value);
}
</script>

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
  
  <h3>mp4 Video</h3>
  <MyPlayer 
    id="my-video" 
    video-url="//vjs.zencdn.net/v/oceans.mp4" 
    poster-url="./assets/logo.png" />

  <h3 style="margin-top: 60px;">m3u8 Video</h3>
  <div class="input-wrapper">
    <div class="input-box">URL:<input type="text" v-model="playUrl" class="input"/></div>
    <div class="play-btn" @click="play">播放</div>
  </div>
  <MyPlayer 
    ref="livePlayer"
    id="my-video-2" 
    :video-url="playUrl" 
    poster-url="./assets/logo.png" />
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin: 60px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

h3 {
  line-height: 2;
}

.input-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 600px;
  height: 60px;
  margin-bottom: 20px;
}

.input-box {
  flex: 1;
  display: flex;
  align-items: center;
}

.input {
  height: 36px;
  width: 80%;
  margin-left: 12px;
}

.play-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  background-color: #42b983;
  color: #fff;
  padding: 10px 20px;
  cursor: pointer;
}
</style>
